<template>
	<div class="vue_app buyGiftCardRecord" style="position: relative;width: 100%;">
		<div>
			<my-header :title="'购买记录'" :hasTitle="true" :hasBack="true"></my-header>
			<!--头部-->
		</div>
		<div class="overhid" :style="`height: ${screenHeight}px`">
			<vertical-scroll ref='verticalScroll'>
				<ul class="buyCard_list">
					<li v-for="(item,index) in recordata" :key="index" @click="gotorderdetile(item)" >
						<div class="giftname">
							<span :class="{dfkorder:(item.payStatus===0 && item.orderStatus===0 && item.waitToCancelTm !=0)}">{{getstatus(item)}}</span>
							<span class="sfltrig ordertime">{{item.orderTm | time}}</span>
						</div>
						<div class="giftimg">
							<img :src="item.giftcardImg ||'static/image/big-giftcard.png'" />
						</div>
						<div class="giftcontant">
							<div class="givegiftname">
								<span>{{item.cardName}}</span>
							</div>
							<!--<p>卡号：{{item.giftcardEntityCode}}</p>-->
							<p>面值：{{Number(item.denomination).toFixed(2)}}元</p>
							<p><span>单价：￥{{Number(item.paidPrice).toFixed(2)}}/张</span><span class="sfltrig"><em>x</em>{{item.cardNum}}</span></p>
						</div>
						<!--<div class="mintime">订单将于<span class="dfkorder">5分钟</span>后自动关闭</div>-->
					</li>
					<div class="no_data" v-if="recordata.length==0 && flag">
						<img src="static/image/no_news.png" style="width:70%;" />
						<p>暂无礼品卡的相关购买记录</p>
					</div>
				</ul>
			</vertical-scroll>
		</div>
		<button-to-top @goTop="goTop"></button-to-top>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import VerticalScroll from '../../real-components/VerticalScroll';
	import ButtonToTop from '../../real-components/ButtonToTopForTest';
	import { showLoading, hideLoading } from "@/utils/loading";
	export default {
		data() {
			return {
				recordata: [],
				flag:false
			}
		},
		components: {
			"my-header": MyHeader,
			"vertical-scroll": VerticalScroll,
			ButtonToTop
		},
		methods: {
			//价格过大字体限制
			pricestyls(price) {
				if(price.toString().length > 4) {
					return '0.75rem'
				} else {
					return '1rem'
				}
			},
			//回到顶部
			goTop() {
				this.$refs.verticalScroll.goTop()
			},
			//获取数据请求
			getrecordata() {
				showLoading()
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/giftCardIndent/findRecord',
					//url: 'http://172.19.4.155:33004/giftCardIndent/findRecord',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					hideLoading()
					this.flag = true
					this.recordata = res.data.data
				}).catch(err=>{
					hideLoading()
					Toast({
						duration: 2000,
						message: '请求接口失败',
						type: "fail"
					});
				})
			},
			//进入订单详情页面
			gotorderdetile(item) {
				this.$router.push({
					name: 'GiftOrderDetails',
					query: {
						"orderNo": item.orderNo,
						"cardCode": item.cardCode,
					}
				})
			},
			//订单状态说明
			getstatus(item){
				if(item.waitToCancelTm == 0 && item.payStatus===0 && item.orderStatus===0){
					return '已取消'
				}else{
					return item.orderStatusVal
				}
			},
		},
		computed: {
			screenHeight() {
				return window.innerHeight - '60';
			}

		},
		filters: {
			Time: function(time) {
				if(time) {
					let date = new Date(time);
					return `${date.getFullYear()}-${date.getMonth()+ 1}-${date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}:${date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()}`;
				}
			}
		},
		watch: {

		},
		mounted() {
			this.getrecordata()
		},
	}
</script>

<style scoped>
	.buyGiftCardRecord .overhid {
		overflow: hidden;
	}
	
	.buyGiftCardRecord .sfltrig {
		float: right;
	}
	/*礼品卡卡面信息展示*/
	
	.buyGiftCardRecord .buyCard_list {
		padding: 0.25rem 0.75rem;
	}
	
	.buyGiftCardRecord .buyCard_list li {
		position: relative;
		text-align: left;
		margin: 0.75rem auto;
		width: 100%;
		background: #fff;
		border-radius: 0.5rem;
		padding: 0.75rem;
	}
	
	.buyGiftCardRecord .buyCard_list li .giftname {
		font-size: 0.75rem;
		line-height: 0.8rem;
		margin-bottom: 0.5rem;
		height: 0.8rem;
	}
	.buyGiftCardRecord .buyCard_list li .mintime{
		text-align: right;
		font-size: 0.6rem;
		margin-top: 0.5rem;
	}
	
	.buyGiftCardRecord .buyCard_list li .dfkorder {
		color: #FA4535;
	}
	
	.buyGiftCardRecord .buyCard_list li .giftname .ordertime {
		font-size: 0.65rem;
		color: #999;
	}
	
	.buyGiftCardRecord .buyCard_list li .giftimg {
		width: 40%;
		height: 0;
		position: relative;
		padding-bottom: 20%;
		display: inline-block;
	}
	
	.buyGiftCardRecord .buyCard_list li .giftimg img {
		position: absolute;
		/* width: 100%;
		height: 100%; */
		width: 6rem;
    	height: 3.75rem;
	}
	
	.buyGiftCardRecord .buyCard_list li .giftcontant {
		text-align: left;
		position: relative;
		display: inline-block;
		width: 58%;
		padding-left: 0.5rem;
		vertical-align: top;
	}
	
	.buyGiftCardRecord .buyCard_list li .giftcontant .givegiftname {
		margin-bottom: 0.5rem;
	}
	
	.buyGiftCardRecord .buyCard_list li .giftcontant p {
		font-size: 0.6rem;
	}
</style>